{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="author" content="YuKalix">
    <link rel="icon" href="images/logo.png">
    <title>Welcome Use Our Website</title>
    <link rel="stylesheet" href="{% static 'css_js/pintuer/pintuer.css' %}">
    <script src="{% static 'css_js/pintuer/jquery.js' %}"></script>
    <script src="{% static 'css_js/pintuer/pintuer.js' %}"></script>

    <style>
        .c_img {
            width: 100%;
        }

        .c_img img {
            width: 150px;
            height: 150px;
            margin-left: 10px;
        }

        @media screen and (max-width: 960px) {
            .c_img img {
                width: 40px;
                height: 40px;
            }
            .button-group-big .button{
                font-size: 3px;
                padding: 10px 10px;
            }
        }
    </style>

</head>
<body>


<header>

    <div class="keypoint bg-blue bg-inverse radius text-center">
        <p>欢迎使用页面操作系统</p>
        <button class="button bg-main">
            <a href="/">首页</a>
        </button>
    </div>

</header>


<section>

    <div class="x2 bg-green">
        x3
    </div>

    <div class="x8" >
        <div class="button-toolbar" >
            <div class="button-group button-group-big" >
                <button type="button" class="button" onclick="allcheck();">
                    <span class="icon-align-justify text-red"></span>全选
                </button>

                <button type="button" class="button" onclick="reversecheck();">
                    <span class="icon-refresh text-red"></span>反选
                </button>
                <button type="button" class="button" onclick="chk()">
                    <span class="icon-trash-o text-red"></span>删除
                </button>

                <button type="button" class="button" onclick="selectk()">
                    <span class="icon-edit text-blue"></span>移动

                </button>


                <div class="button-group">

                    <button type="button" class="button dropdown-toggle">
                        <span class="icon-edit"></span><label for="classify">类别</label>
                        <select id="classify" class="drop-menu" name="classify">
                            <option value="1"></option>
                            {% for dir in dir_name %}
                                <option value="{{ dir }}"> {{ dir }}</option>
                            {% endfor %}
                        </select>
                    </button>

                </div>

            </div>
        </div>

        <div class="c_img">
        <div class="media-inline" style="float: left;">

            </div>
            {% for pic in pics %}
                <div class="media-inline" style="float: left;">
                <div class="media clearfix">
                    <label for="{{ pic }}">
                        <b style="color:red; position: absolute;margin-left: 15px">{{ forloop.counter }}.</b>
                        <img src="/image/{{ pic }}" class="radius" alt="...">
                        <input id="{{ pic }}" type="checkbox" name="select_image" value="{{ pic }}"style="position: relative;left: -20px">
                    </label>
                </div>

            </div>
            {% endfor %}

        </div>
        <div class="clear" style="margin: 0 auto">
            <ul class="pagination pagination-group">
                <li class="disabled"><a href="#">«</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">»</a></li>
            </ul>
        </div>
    </div>

    <div class="x2 bg-green">
        x3
    </div>


</section>


<script>
    // 全选

    function allcheck() {

        $('input[name="select_image"]').prop('checked', 'true');
    }

    //反选
    function reversecheck() {
        $('input[name="select_image"]').each(function () {
            $(this).prop("checked", !$(this).prop("checked"));
        });
    }


    function chk() {

        var obj = document.getElementsByName('select_image');
        var s = '';
        for (var i = 0; i < obj.length; i++) {

            if (obj[i].checked) s += obj[i].value + ',';

        }


        if (s === ''){
            alert('你还没有选择任何内容')
        }
        else {
                $.ajax({
                url: {% url 'operation:image_operation' %},
                type: 'POST',
                data: {'data': s},
                success: function(){
                    alert('删除成功。');
                    history.go(0);
                }
            });
        }


    }

    function selectk() {

        var select_image = document.getElementsByName('select_image');
        var options=$("#classify option:selected");

        var s = '';

        for (var i = 0; i < select_image.length; i++) {
            if (select_image[i].checked) s += select_image[i].value + ',';
        }

        if(s === ''){
            alert('你还没有选择任何内容！');
        }
        else if(options.val() === '1'){
            alert('请选择类别！');
        }
        else {
            $.ajax({
                url: {% url 'operation:remove' %},
                type: 'POST',
                data: {'data': s, 'classify': options.val()},
                success: function(){
                    alert('移动成功');
                    history.go(0);
                }
            });
        }
    }
</script>





</body>
</html>